import { FC } from 'react';

import ScrollModel from '@/components/ScrollModel';

import styles from './style.less';
import classnames from 'classnames';

interface childItem {
  info: string;
  date: string;
  type: string;
}

interface dataItem {
  B102: string;
  infos: childItem[];
}

interface Iprops {
  dataSource: dataItem[];
  height?: number;
  onCompanyClick?: (company: dataItem) => void;
  onInfoClick?: (current: childItem, company: dataItem) => void;
}

const ImportantCompany: FC<Iprops> = (props) => {
  const { dataSource, height = 365, onCompanyClick, onInfoClick } = props;
  return (
    <div className={styles.list_container}>
      <ScrollModel height={height}>
        {dataSource.map((item: dataItem, index: number) => (
          <div className={styles.item_warp} key={`${item.B102}-${index}`}>
            <p
              className={classnames(
                styles.item_title,
                onCompanyClick ? styles.canclick : null,
              )}
              onClick={() => {
                onCompanyClick && onCompanyClick(item);
              }}
            >
              {item.B102}
            </p>
            {item.infos &&
              item.infos.map((row: childItem, num: number) => (
                <div
                  className={classnames(
                    styles.child_item,
                    onInfoClick ? styles.canclick : null,
                  )}
                  key={`${row.info}-${num}`}
                  onClick={() => {
                    onInfoClick && onInfoClick(row, item);
                  }}
                >
                  <p className={styles.child_info}>
                    【{row.type}】<span>{row.info}</span>
                  </p>
                  <p className={styles.child_time}>{row.date}</p>
                </div>
              ))}
          </div>
        ))}
      </ScrollModel>
    </div>
  );
};
export default ImportantCompany;
